import React, { useEffect, useRef, useState } from "react";
import { Avatar, Button } from "antd-mobile";
import { isValidArr } from "@/utils";
import { NotiComp } from "@/components/common";
import { useSession } from "next-auth/react";
import useGame from "@/components/pages/game/car/stores/useGame";

const pageName = "game.header";
const klassName = pageName.replace(/\./g, '-');

export default function VReadyComp({passed, distance, speed, avatar}) {
  const {data} = useSession();
  let duration = useGame(state => state.duration)

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        <Avatar src={`${process.env.NEXT_PUBLIC_AVATAR_URL}${data?.user
          ?.extra?.avatar}`} />

        <span>{((duration - passed) / 1000).toFixed(1)}s</span>

        <span>{(distance / 100).toFixed(2)}m</span>

        <span>{(speed).toFixed(0)}m/s</span>
      </div>
    </div>
  )
}

